
<!-- 
  单页面应用程序（SPA）：通过路由系统，把组件串联起来，整个项目都有一个页面，叫index.html。
    在SPA中，页面的切换，本质上就是组件的显示与隐藏，背后是路由系统在起作用。

  多页面应用程序（MPA）：整个项目由N个页面组件。

  你是如何理解SPA的？
    答：1）通过路由系统，把组件串联起来，整个项目都有一个页面，叫index.html。
       2）在SPA中，页面的切换，本质上就是组件的显示与隐藏，背后是路由系统在起作用。
       3）由于整个项目只有一张页面，对SEO是不利。

  路由使用步骤：
    1）安装
      cnpm i vue-router@3 -S       vue2的项目，路由的版本是v3     vue3的项目，路由版本是v4
    2）在src/router/index.js    注册路由   路由的本质就是一个插件   Vue.use(插件)
      new VueRouter 得到路由器   一个路由器中就可以管理N个路由规则。 导出路由器。
    3）在main.js是去挂载路由器
      子子孙孙都可以使用两个组件：router-link  router-view
      子子孙孙都可以使用两个对象：$router  $route  
    4）在合适的位置就可以放路由的出口
      App.vue放一级路由出口： router-view 

  两种路由模式？
    答：1）hash路由  有#  背后监听hashchange事件  hash变了，就可以让某个组件显示，让某些组件隐藏。hash路由非常简单，在项目中大胆使用。如果项目没有特殊需求，大胆使用hash路由。也不需要后端配合。
       2）history路由。没有#   看一去，更像api接口地址。背后是通过history api实现的。在项目中使用是需要后端配合的。

  两个全局组件？
    答：1）router-link to tag active-class 声明式导航（设计菜单导航的）
            to 用于指定跳转的目标，tag是用于指定最终渲染成什么样的标签，默认是a标签。
            active-class / exact-active-class 用于指定菜单的高亮样式。
        2）router-view  视图的容器（路由的出口）
           name属性用于指定命名视图。  如果没有指令名字，默认名字是default


  两个内置的API？
    答：1）$route 路由信息： this.$route.fullPath/query/params/mate。 使用wath可以监听$route。
      2）$router 路由器（路由实例）  this.$router.push/replace/go/forword/back...  实现编程式导航。

  两种路由跳转？
    答：1）声明式导航/声明式跳转  通过router-link做的跳转，一般是用于菜单设计。
       2）编程式导航/编程式跳转  通过$router来实现，一般用到事件中。

  两种命名？ 
    答：1）命名视图   给rotuer-view添加一个name属性  可以有不同name的路由出口。官方文档上有一个小案例。看一下。
      2）命名路由   给路由规则上添加name属性，这个路由规则就是所谓的命名路由。name是唯一的。跳转时就可以根据name进行跳转... 

  两种路由传参？
    答：1）query传参      /login?a=1&b=2&c=3   ?a=1&b=2&c=3叫query传参   获取：this.$route.query
        2）动态路由（params传参） 配置路由规则：{path:'/good/:id',component:Good}  url:/good/001   001叫parmas参数  获取：this.$route.params 

  两种优化手段？
    答：1）路由的懒加载，在一个SPA项目中，组件是非常非常多的。我们需要根据路由系统进行按需加载组件（而不是一次性加载所有组件），该怎么实现呢？使用路由懒加载（背后原理是Webpack代码分割技术、Vue异步组件）。路由懒加载，是一种性能优化方案。
      2）重定向  当你访问某个路由，人家可以给你重定向到另一个路由。是提高用户体验的一种优化。
        别名：别名是path的简写，可以用于路由访问；什么时候需要用到别名？当path比较复杂时，需要给它设计一个别名。
  
  两个难点？ 在公司中写项目，最难是路由，因为路由中牵涉到权限设计。
    答：1）嵌套路由：
      2）导航守卫：在导航守卫中就可以处理权限。

  相关的面试题：
    1）说一下history和hash路由的区别？
    2）什么是命名视图，命名路由，别名？
       命名视图：router-view name 
       { path, component, name, alias }
    3）说一下，路由传参？动态路由？
      两种传参方式：query params   /good/:id    
    4）什么是路由的懒加载？背后的原理是什么？
      答：一个项目有非常多的组件构成，当访问某个url时，才去加载某个组件，叫路由的懒加载。
         webpack的代码分割技术 + 通过import函数动态导入vue组件
    5）你这个管理系统的权限是如何设计的？
      答：导航守卫了。之前讲权限时，有一张图，那个图是核心。 
    6）在vue项目中，如何监听路由的变化？
      答：watch监听$route 
    7）什么是SPA，你是如何理解SPA？
      答：

 -->